<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.content {
			width: 400px;
			height: 400px;
			background: green;
			position: relative;
		}

		.box {
			width: 100px;
			height: 100px;
			background: rgb(182, 163, 163);
			position: absolute;
			left: 200px;
			top: 200px;
		}
	</style>
	<script>

	</script>
</head>

<body>

	<div class="content">

		<div class="box">

		</div>


	</div>

	<div class="show"></div>
	<script>
		// 监听鼠标在 content div 中 移动事件 mousemove 事件
		// 移动中-获取事件对象--相当于事件源的坐标
		var contentDiv = document.querySelector('.content');
		var showDiv = document.querySelector('.show');

		contentDiv.onmousemove = function (evt) {
			console.log(evt.target);
			// ***如果contentDiv 有子元素-- 移入子元素，事件会冒泡给 contentDiv
			// 这个时候 事件对象里面的事件源是 子元素，offsetX  是相对于事件源的
			// ---
			// 移动中-获取事件对象--相当于事件源的坐标
			// var str = evt.offsetX + ',' + evt.offsetY;


			// var offsetX= evt.pageX- contentDiv 相对于浏览器左边的距离
			// var offsetY= evt.pageY- contentDiv 相对于浏览器上边的距离

			var offsetX = evt.pageX - contentDiv.offsetLeft
			var offsetY = evt.pageY - contentDiv.offsetTop
			var str = offsetX + ',' + offsetY;

			// 控制div内容
			showDiv.innerHTML = str;

		}

	</script>


</body>

</html>